<script lang="ts">
export default {
  name: "DeviceDecoderDetailDialog"
}
</script>

<!--
 * @Description: 设备编辑对话框
 * @version:
 * @Author:
 * @Date: 2022-10-24 09:10:28
 * @LastEditors:
 * @LastEditTime: 2022-10-24 09:10:28
-->
<template>
  <!-- 对话框 -->
  <el-dialog :close-on-click-modal="false" :model-value="visible" :title="dataState.title" min-width="200px"
             @close="handleCancel">

    <el-descriptions
      ref="dataFormRef"
      :column="1"
      :model="dataState.formData"
      border
    >
      <el-descriptions-item label="包名称"> {{ dataState.formData.artifactId }}</el-descriptions-item>
      <el-descriptions-item label="协议版本">
        <el-tag size="small">{{ dataState.formData.jarVer }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="文件版本"> {{ dataState.formData.version }}</el-descriptions-item>
      <el-descriptions-item label="文件名称"> {{ dataState.formData.fileName }}</el-descriptions-item>
      <el-descriptions-item label="所属分组"> {{ dataState.formData.groupId }}</el-descriptions-item>
      <el-descriptions-item label="文件大小"> {{ formatFileSize(dataState.formData.size) }}</el-descriptions-item>
      <el-descriptions-item label="命名空间"> {{ dataState.formData.jarSpace }}</el-descriptions-item>

      <el-descriptions-item label="包含类型">
        <el-input v-model="dataState.formData.classFileName" :autosize="{ minRows: 1, maxRows: 100 }" type="textarea"/>
      </el-descriptions-item>

      <el-descriptions-item label="依赖文件">
        <el-input v-model="dataState.formData.dependencies" :autosize="{ minRows: 1, maxRows: 100 }" type="textarea"/>
      </el-descriptions-item>

    </el-descriptions>

  </el-dialog>
</template>

<script lang="ts" setup>

import {onMounted, reactive, ref} from "vue";

import {ElForm} from "element-plus";
import {DeviceVersion} from "@/api/repo/comp/local/jar-file/types";
import {
  formatFileSize,
} from '@/utils/fileutil';

const props = defineProps(['visible']);
const emit = defineEmits(['create', 'update', 'cancel']); //注意：这个是父组件<dict-type-edit>标签上的@close
const dataFormRef = ref(ElForm); // 属性名必须和元素的ref属性值一致

/**
 * 对外声明接口：父页面可以调用它
 */
defineExpose({initEditData});

// 数据状态：定义
let dataState = reactive({
  // 类型：create/update
  type: 'create',
  // 标题
  title: '详细信息',
  // 表单数据
  formData: {
    jarVer: '',
    fileName: '',
    fileNameShow: '',
    load: false,
    groupId: '',
    groupIdShow: '',
    artifactId: '',
    artifactIdShow: '',
    version: '',
    jarSpace: '',
    size: 0,
    createTime: 0,
    updateTime: 0,
    dependencies: '',
    classFileName: '',
    classFileNameShow: '',
  }
});

/**
 * 取消
 */
function handleCancel() {
  emit('cancel', "子组件传给父组件的值");
}

function initEditData(entity: DeviceVersion) {
  dataState.formData.artifactId = entity.artifactId;
  dataState.formData.artifactIdShow = entity.artifactIdShow;
  dataState.formData.createTime = entity.createTime;
  dataState.formData.load = entity.load;
  dataState.formData.fileName = entity.fileName;
  dataState.formData.fileNameShow = entity.fileNameShow;
  dataState.formData.groupId = entity.groupId;
  dataState.formData.groupIdShow = entity.groupIdShow;
  dataState.formData.jarSpace = entity.jarSpace;
  dataState.formData.jarVer = entity.jarVer;
  dataState.formData.updateTime = entity.updateTime;
  dataState.formData.version = entity.version;
  dataState.formData.size = entity.size;

  dataState.formData.dependencies = '';
  for (let dependency of entity.dependencies) {
    dataState.formData.dependencies += dependency.artifactId + "-" + dependency.version + ".jar\n";
  }
  if (dataState.formData.dependencies.length > 0){
    dataState.formData.dependencies = dataState.formData.dependencies.substring(0,dataState.formData.dependencies.length - 1);
  }

  dataState.formData.classFileName = '';
  for (let classFileName of entity.classFileName) {
    dataState.formData.classFileName += classFileName + "\n";
  }
  if (dataState.formData.classFileName.length > 0){
    dataState.formData.classFileName = dataState.formData.classFileName.substring(0,dataState.formData.classFileName.length - 1);
  }
}

onMounted(() => {
});

</script>
